<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-27 22:53
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <perfect-scrollbar class="x-render-scrollarea x-render-main-content">
    <template v-if="isRenderFinish">
      <h2>
        操作区
      </h2>
      <div class="x-render-main-content-header">
        <span>表格列 操作区</span>
        <a-button type="primary" size="small" @click="addHandler(false)">添加列</a-button>
        <a-button type="primary" size="small" @click="addHandler(true)">添加列组</a-button>
      </div>
      <XRenderColumnDraggable></XRenderColumnDraggable>
      <div class="x-render-main-content-header">
        <span>按钮 操作区</span>
        <a-button type="primary" size="small" @click="addBtnHandler">添加按钮</a-button>
      </div>

      <XRenderButtonDraggable :btnJustify="btnJustify"></XRenderButtonDraggable>

      <h2 style="margin-top: 60px;">展示区</h2>
      <div class="x-render-main-table">
        <x-render-table
          :columns="xDesignTable.tableColumnOptions"
          :data-source="xDesignTable.dataSource"
          :table-props="xDesignTable.tablePropsData"
          :table-btns="xDesignTable.tableBtns"
        />
      </div>

    </template>
    <XRenderTableBtnDialog :show.sync="xDesignTable.btnFormShow" :is-add="xDesignTable.btnFormAdd"/>
  </perfect-scrollbar>
</template>

<script>
import {cloneDeep} from 'lodash'

import XRenderTableBtnDialog from '../XRenderTableBtnDialog'
import XRenderButtonDraggable from '../XRenderButtonDraggable'
import XRenderColumnDraggable from '../XRenderColumnDraggable'
import {randomString} from '../../../../../libs/utils'

export default {
  name: 'XRenderMainContent',
  inject: ['xDesignTable'],
  components: {
    XRenderTableBtnDialog,
    XRenderButtonDraggable,
    XRenderColumnDraggable
  },
  data() {
    return {
      isRenderFinish: false
    }
  },
  computed: {
    btnJustify: {
      get() {
        const {xDesignTable} = this
        const {btnJustifyContent} = xDesignTable.tablePropsData
        return btnJustifyContent || 'flex-start'
      }
    }
  },
  mounted() {
    // 确保渲染结束
    this.$nextTick(() => {
      this.isRenderFinish = true
    })
  },
  methods: {
    addBtnHandler() {
      const {xDesignTable} = this
      xDesignTable.tableBtns.push({
        id: randomString(),
        show: true,
        name: '测试',
        text: '测试' + (Date.now() % 9)
      })
    },

    copyHandler(item, index) {
      const {xDesignTable} = this
      const cloneDeep = cloneDeep(item)
      cloneDeep.key = 'key_' + Date.now()
      cloneDeep.dataIndex = 'key_' + Date.now()
      cloneDeep.title = item.title + '_复制'
      // 通过index添加
      xDesignTable.tableColumnOptions.splice(index + 1, 0, cloneDeep)
    },
    addHandler(isGroup = false) {
      const {xDesignTable} = this
      const key = 'key_' + Date.now()
      const add = isGroup ? {
        id: randomString(),
        isGroup: true,
        // 层级1
        level: 1,
        title: '列组',
        width: 100,
        children: []
      } : {
        id: randomString(),
        key: key,
        isGroup: false,
        level: 1,
        width: 100,
        dataIndex: key,
        title: '列'
      }
      xDesignTable.tableColumnOptions.splice(xDesignTable.tableColumnOptions.length, 0, add)
      if (!isGroup) {
        const dataSource = xDesignTable.dataSource[0]
        dataSource[key] = key
        // 通过index添加
        xDesignTable.dataSource.splice(0, 1, dataSource)
      }
    }
  }
}
</script>

<style lang="css" scoped>
/* 中间区域 */
.x-render-main-content {
  padding: 15px;
  display: flex;
  flex-flow: column nowrap;
}

.x-render-main-content .x-render-main-content-header {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 100px)  auto;
  grid-column-gap: 8px;
  place-items: center;
  font-size: 14px;
  color: #1890ff;
  font-weight: 600;
  font-family: "Microsoft YaHei UI Light";
  margin: 8px 0;
}

.x-render-main-content h2 {
  font-size: 18px;
  color: #1890ff;
  font-weight: 600;
  font-family: "Microsoft YaHei UI Light";
}

/* 滚动区域 */
.x-render-scrollarea {
  /* 减去头部的高度 */
  height: calc(100% - 60px);
}

.x-render-main-table{
  width: 100%;
}

*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  cursor: pointer;
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: rgba(64, 158, 255, .9);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 10px;
}
</style>
